const $post = $("#post"),// 主贴子内容
    $users = $("#users"),// 所有用户选择列表
    $comments = $("#comments"),// 评论列表
    $new_comment = $("#new-comment"),// 新发表评论
    $btn = $("#comment-btn"), // 发表按钮
    postId = 1; // 帖子id
let users = new Map(), // 用户id->name 字典
    curUserId = 1;// 当前选中用户id

// 获取 postId 的帖子
$.get('http://localhost:3000/posts2/' + postId, function (data) {
    $post.html(template('tmp-post', { "post": data }));

});

// 获取所有用户
$.get('http://localhost:3000/users', function (data) {
    for (let index = 0; index < data.length; index++) {
        const element = data[index];
        users.set(element.id, element.name);

    }
    $users.html(template('tmp-users', { "users": data }))
    // console.log(users);
});

// 获取该帖子下的所有评论
$.get('http://localhost:3000/comments', function (data) {
    for (let index = 0; index < data.length; index++) {
        const element = data[index];
        element.userId = parseInt(element.userId);
        element.postId = parseInt(element.postId);
        element.username = users.get(element.userId);
        $comments.append(template('tmp-comment', element));
    }
    addDelBtn();
});

// 选中用户改变事件
$users.change(function () {
    curUserId = $(this).val()
});

// 发表按钮点击事件
$btn.click(function () {
    let text = $new_comment.val();// 获取评论内容

    if (text === '') {
        alert('评论内容为空！');
        return;
    }

    $.post('http://localhost:3000/comments', {
        "postId": postId,
        "userId": curUserId,
        "comment": text
    }, function (data) {
        data.username = users.get(data.userId);// 获取用户名
        $comments.append(template('tmp-comment', data));
        // addDelBtn();
        $new_comment.val('');
    });
})

// 删除按钮添加功能函数
function addDelBtn() {
    // 找到每个删除按钮添加事件
    $('.delete').click(function () {
        // 使用delete方法删除
        $.ajax({
            url: `http://localhost:3000/comments/${$(this).parents('li').attr('uid')}`,
            type: 'delete'
        });
        // 删除按钮的祖先li标签
        $(this).parents('li').remove();
    })
}